<template>
  <div>
    <div>
      <el-button type="primary" @click="add">新增input可编辑的tbale行数据</el-button>
    </div>
    <InputFormTable
      ref="inputFormTable"
      :dataType="dataTypeObj"
      :theadData="theadData"
      :tableData="tableDataList"
      @select="selectTableOptions"
    />
  </div>
</template>

<script>
// 目的为了简化组件使用时的代码和统一风格
import _ from 'lodash'
export default {
  data () {
    return {
      theadData: [
        {
          prop: 'selection',
          align: 'center',
          width: '80px'
        },
        {
          prop: 'index',
          align: 'center',
          label: '序号',
          width: '80px'
        },
        {
          prop: 'volumeFactor',
          label: '材积系数',
          type: 'input',
          align: 'center'
        },
        {
          prop: 'conditionFormula',
          label: '条件表达式',
          type: 'input',
          align: 'center'
        },
        {
          prop: 'weighingFormula',
          label: '计重公式',
          type: 'input',
          align: 'center'
        },
        {
          prop: 'weighingDes',
          label: '计重公式描述',
          type: 'input',
          align: 'center'
        }
      ], // 表头字段定义
      tableDataList: [], // 新增table列表
      tableDataItem: { // 定义新增行的字段
        volumeFactor: '',
        conditionFormula: '',
        weighingFormula: '',
        weighingDes: ''
      },
      dataTypeObj: { // table行内对应字段的值类型定义 只支持（Number/String/Boolean）
        volumeFactor: 'Number'
      }
    }
  },
  created () {

  },
  methods: {
    add () { // 新加行
      const item = _.clone(this.tableDataItem)// 克隆行字段初始数据
      this.tableDataList.push(item)
    },
    selectTableOptions (val) { // val选中项是数组（同el-table的select）
      console.log('val: ', val)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
